前言

閱讀這篇文章前，讓我們來想想看：

• 如何用一句話說明什麼是 TypeScript？
• 為什麼要用 TypeScript進行開發？

如果有點不清楚答案的話，可以先看看第一天的文章喔！

第一天TypeScript 起手式初步地介紹了 TS 的功能與價值。但是，這只是個開始，接下來，學習動手實作 TS 才是重點。

今天，我們就來學習如何搭建 TS 的測試和開發環境，嘗試印出 Hello TypeScript 吧！。

不用安裝，直接使用的線上介面 - 官網 Playground

TypeScript 官方網站提供了一個線上測試介面 Playground，讓使用者可以在左側輸入 TS 語法，右側會自動顯示編譯後的 JS 程式碼

在playground的左側輸入

function hello(language: string): string {
  return "Hello " + language;
}

hello("TypeScript");

點擊run，即編譯成右側的 JS 程式碼

"use strict";
function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

打開瀏覽器的檢查模式 console，就可以看到 Hello TypeScript 了！

本地安裝 TypeScript 編譯工具

TS 編譯工具的作用是將 TS 檔案(含.ts或.d.ts副檔名)編譯成 JS檔案(含.js副檔名)。

在安裝 TS 編譯工具之前，我們需要先確認安裝Node.js以及 npm 或 yarn 套件版本管理工具，而後就可以開始安裝了。

1. 首先，在終端機輸入指令:

npm install -g typescript

-g 表示全域環境安裝，安裝完成之後就可以在任何地方將 TS 檔案編譯成 JS 檔案。

2. 創建一個hello.ts檔案
   使用 TS 語言的檔案會統一以.ts為檔名(倘若是用 TypeScript 撰寫 使用 JSX 的React應用 則以.tsx為檔名)。

3. 在hello.ts檔案中撰寫程式碼
   這裡使用 TS 註解語法:指定參數 language 的資料型別為字串(string)

function hello(language: string): string {
  return "Hello " + language;
}

hello("TypeScript");

3. 進到專案資料夾，使用 tsc 命令進行編譯

tsc hello.ts

編譯時，TS 會進行靜態型別檢查，而後，會在專案資料夾下產生一個新的 hello.js 檔案，裡面是編譯後的JS程式碼。

function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

可以看到，原先 TS 中的型別註解已经被移除，生成的 J S檔案沒有任何型別判斷的程式碼。

那麼，如果 TS 程式碼的型別有誤呢？

例如，將上面的程式碼修改如下:

function hello(language: number): string {
  return "Hello " + language;
}

hello("TypeScript");

將傳入參數設定為數字(number)，而後卻是傳入字串(string)，那又會產生什麼呢？讓我們輸入tsc hello.ts命令再編譯一次。

哎呀！跳出了錯誤警告

但是，值得注意的是，即使有錯誤警告，仍然編譯出了JS檔案，我們仍然可以使用編譯後的檔案，印出 Hello TypeScript。

function hello(language) {
    return "Hello " + language;
}
hello("TypeScript");

小結

今天介紹了兩種建立 TS 程式碼運行環境的方式，一個是線上環境，另一個則是本地開發環境，都很簡單，可以立馬動手試試看！

至於，如何自由地將 TS 檔案編譯成我們要的 JS 檔案？就留待明天介紹tsconfig.json設定檔時，再來細細探討吧。

參考資料：
TypeScript官網
TypeScript入門教程